import React, { useState, useEffect } from 'react';
import { Breadcrumb } from 'antd'
import { useLocation, Link } from 'umi'
import styles from './index.less'
export interface IMyBreadcrumbProps {
}

export default function MyBreadcrumb (props: IMyBreadcrumbProps) {
  const [title, setTitle] = useState('')
  const [subTitle, setSubTitle] = useState('')
  const breadcrumbList = {
    '/pro/list': {
      title: '产品管理',
      subTitle: '产品列表'
    },
    '/pro/recommend': {
      title: '产品管理',
      subTitle: '推荐列表'
    },
    '/pro/seckill': {
      title: '产品管理',
      subTitle: '秒杀列表'
    },
    '/banner/list': {
      title: '轮播图管理',
      subTitle: '轮播图列表'
    }
  }
  const { pathname } = useLocation()
  useEffect(() => {
    for(var key in breadcrumbList) {
      if (key === pathname) {
        setTitle(breadcrumbList[key].title)
        setSubTitle(breadcrumbList[key].subTitle)
      }
    }
  })
  return (
    <Breadcrumb className={ styles.breadcrumb_container }>
      <Breadcrumb.Item>首页</Breadcrumb.Item>
      <Breadcrumb.Item>
        {title}
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Link to={ pathname }>{subTitle}</Link>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
}
